<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/fragment::top">

</head>

<body>
<div class="lyear-layout-web">
    <div class="lyear-layout-container">
        <!--左侧导航-->
        <div th:replace="common/fragment::leftmenu"></div>
        <!--End 左侧导航-->

        <!--头部信息-->
        <div th:replace="common/fragment::header"></div>
        <!--End 头部信息-->

        <!--页面主要内容-->
        <main class="lyear-layout-content">

            <div class="container-fluid">
                <div>
                    <form action="#!" class="horizontal " id="edit-stock-form" method="post">
                        <!--用户名-->
                        <div class="form-group col-md-5">
                            <label class="col-md-4 control-label" for="stockname" style="text-align: center;line-height: 36px">库名</label>
                            <div class="col-md-6">
                                <input hidden="" id="stockid" th:value="${stock.id}" type="text">
                                <input class="form-control" id="stockname" name="stockname" placeholder="库名"
                                       th:value="${stock.name}" type="text">
                            </div>
                        </div>

                        <!--用户状态-->
                        <div class="form-group  col-md-5">
                            <label class="col-md-4 control-label" for="stocklinkman" style="text-align: center;line-height: 36px">联系人</label>
                            <div class="col-md-6">
                                <input class="form-control" id="stocklinkman" name="stocklinkman"
                                       placeholder="联系人" th:value="${stock.linkman}" type="text">
                            </div>
                        </div>

                        <!--登入名-->
                        <div class="form-group col-md-5">
                            <label class="col-md-4 control-label" for="stockaddress" style="text-align: center;line-height: 36px">地址</label>
                            <div class="col-md-5">
                                <input class="form-control" id="stockaddress" name="stockaddress" placeholder="登入名"
                                       th:value="${stock.address}" type="text">
                            </div>
                        </div>

                        <!--电话-->
                        <div class="form-group col-md-5">
                            <label class="col-md-4 control-label" for="stockphone" style="text-align: center;line-height: 36px">电话</label>
                            <div class="col-md-6">
                                <input class="form-control " id="stockphone" maxlength="11"
                                       name="stockphone" placeholder="电话" th:value="${stock.phone}" type="tel">
                            </div>
                        </div>

                        <!--邮箱-->
                        <div class="form-group col-md-5">
                            <label class="col-md-4 control-label" for="stockemail" style="text-align: center;line-height: 36px">邮箱</label>
                            <div class="col-md-8">
                                <input class="form-control " id="stockemail" name="stockemail" placeholder="邮箱"
                                       th:value="${stock.email}" type="email">
                            </div>
                        </div>

                        <!--备注-->
                        <div class="form-group col-md-10">
                            <label class="col-md-2 control-label" for="comment" style="text-align: center;line-height: 36px">备注</label>
                            <div class="col-md-10">
                                <input class="form-control " id="comment" name="comment" placeholder=".....备注....."
                                       th:value="${stock.comment}" type="text">
                            </div>
                        </div>

                        <div class="form-group col-md-10">
                            <button
                                    class="btn btn-primary ajax-post col-md-2"
                                    id="save-stock-btn"
                                    type="button">保存
                            </button>
                            <button
                                    class="btn btn-default col-md-2"
                                    onclick="history.back(-1);return false;"
                                    type="button">返 回
                            </button>
                        </div>
                    </form>
                </div>

            </div>
            <!--添加设定阈值按钮组-->
            <div class="form-group col-md-10">
                <div class="col-md-2">
                    <button
                            class="btn-xs btn-info ajax-post col-md-12"
                            id="config-threshold-btn"
                            type="button">设定阈值
                    </button>
                </div>

                <div class="col-md-2" hidden="hidden" id="reset-threshold-btn-div">
                    <button
                            class="btn-xs btn-info ajax-post col-md-12"
                            id="reset-threshold-btn"
                            type="button">重置阈值
                    </button>
                </div>
                <div class="col-md-2" hidden="hidden" id="save-threshold-btn-div">
                    <button
                            class="btn-xs btn-info ajax-post col-md-12"
                            id="save-threshold-btn"
                            type="button">保存阈值
                    </button>
                </div>

            </div>
            <!--END添加设定阈值按钮组-->

            <!--添加明细-->
            <div hidden="hidden" id="threshold-table">

                <table class="table table-bordered">
                    <thead id="goodheader">
                    <tr>
                        <!--                <th>序号</th>-->
                        <th hidden="hidden">仓库id</th>
                        <th hidden="hidden">商品id</th>
                        <th>仓库名称</th>
                        <th>商品名称</th>
                        <!--    <th>角色图标</th>-->
                        <th>商品规格</th>
                        <!--                                            <th>包装</th>-->
                        <th>计量单位</th>
                        <th>设定阈值</th>
                        <th>新阈值</th>
                        <!--    <th>操作</th>-->
                    </tr>
                    </thead>
                    <tbody id="purdetail">
                    <tr th:each="repo:${repoinfolist}" th:if="${repo.goodcount gt 0}">
                        <td class="repoid" hidden="hidden" th:text="${repo.id}"></td>
                        <td class="goodid" hidden="hidden" th:text="${repo.goodPO.id}"></td>
                        <td th:text="${repo.stockPO.name}"></td>
                        <td th:text="${repo.goodPO.name}"></td>
                        <td th:text="${repo.goodPO.spec}"></td>
                        <td th:text="${repo.goodPO.unit}"></td>

                        <td class="oldthreshol" th:text="${repo.threshold}"></td>
                        <td>
                            <input class="newthreshol" th:placeholder="${repo.threshold}" th:value="${repo.threshold}" type="number">
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <!--END添加明细-->
        </main>
        <!--End 页面主要内容-->
    </div>
</div>

<div th:insert="common/fragment::tail-script"></div>

<style>
    .modify {
        color: #ac2925;
        font-weight: bolder;
    }
</style>

<script type="text/javascript">
    $(function () {
        let flag = true

// 打开阈值配置表
        $('#config-threshold-btn').on('click', function (e) {
            flag = !flag;
            if (flag == false) {
                $('#threshold-table').attr('hidden', false);
                $('#reset-threshold-btn-div').attr('hidden', false);
                $('#save-threshold-btn-div').attr('hidden', false);

                $('#edit-stock-form input').each(function (i, e) {
                    $(e).attr('readonly', 'readonly');
                })
                $(this).text('取消配置')
            } else {

                $('#threshold-table').attr('hidden', true);
                $('#reset-threshold-btn-div').attr('hidden', true);
                $('#save-threshold-btn-div').attr('hidden', true);

                $('#edit-stock-form input').each(function (i, e) {
                    $(e).attr('readonly', false);
                })
                $(this).text('设定阈值')


                $('.newthreshol').each(function (i, e) {
                    let oldele = $(e).parents('tr').children('.oldthreshol')
                    $(e).val(oldele)
                    $(e).parents('tr').removeClass('modify')
                })
            }

        });

// 修正阈值输入为整数
        $('.newthreshol').each(function (i, e) {
            $(e).blur(function () {
                let val = $(e).val()
                val = parseInt(val)
                $(e).val(val)
            })

        })

// 输入框 newthreshol 有变化 和原来值不同则 显示红色
        $('.newthreshol').each(function (i, e) {
            $(e).blur(function () {
                let newVal = $(e).val()
                let oldele = $(e).parents('tr').children('.oldthreshol')
                let oldVal = oldele.text()
                if (oldVal !== newVal) {
                    $(e).parents('tr').addClass('modify')
                } else {
                    $(e).parents('tr').removeClass('modify')
                }
            })

        })

// 保存仓库修改 按钮
        $('#save-stock-btn').click(function () {
            let stockid = $('#stockid').val()
            let name = $('#stockname').val()
            let address = $('#stockaddress').val()
            let linkman = $('#stocklinkman').val()
            let phone = $('#stockphone').val()
            let email = $('#stockemail').val()
            let comment = $('#comment').val()
            /*
                        // 1 检查仓库名
                        if (name == '') {
                            confirmMsg("必须填写仓库名")
                        }
                        // 2 检查地址
                        if (address == '') {
                            confirmMsg("必须填写地址")
                        }*/

            let data = {
                id: stockid,
                name: name,
                phone: phone,
                email: email,
                address: address,
                linkman: linkman,
                comment: comment
            }

            post_ajax("/stock/savestock.ajax", data, "/stock/stocklist.do")

        })


// 重置阈值 按钮
        $('#reset-threshold-btn').click(function () {
            $('.newthreshol').each(function (i, e) {
                let oldele = $(e).parents('tr').children('.oldthreshol')
                $(e).val(oldele)
                $(e).parents('tr').removeClass('modify')
            })
        })

// 保存阈值配置表 /stock/savethresho.ajax
        $('#save-threshold-btn').click(function () {
            let data = []
            let stockid = $('#stockid').val()
            let StockPO = {id: stockid}
            // 	GoodPO
            // 	StockPO
            $('.modify').each(function (i, e) {
                let goodid = $(this).children('.goodid').text()
                let GoodPO = {id: goodid}

                let newthreshol = $(this).find('.newthreshol').val()
                let threshold = newthreshol

                let repoid = $(this).children('.repoid').text()
                let RepoInfoPO = {
                    id: repoid,
                    stockPO: StockPO,
                    goodPO: GoodPO,
                    threshold: threshold
                }
                data.push(RepoInfoPO)
            })
            console.log(data)


            post_ajax("/stock/savethresho.ajax",data,"/stock/editstock.do?id=" +stockid)
        })
    });
</script>
</body>
</html>